<template>
  <div>
    <div class="box-img"><img src="../../assets/images/us1.jpg" alt="" /></div>
    <!-- 服务项目 -->

    <div class="bj">
      <xtltie :xtitle="xtitle"></xtltie>
      <div class="content-list">
        <ul>
          <li>
            <div class="c-l-left">
              <img src="../../assets/images/jianzhuang.jpg" alt="" />
            </div>
            <div class="c-l-right">
              <h3>53° &nbsp;&nbsp;&nbsp; 500斤 &nbsp;&nbsp;&nbsp; 洞藏酒</h3>
              <p>
                <span>封坛介绍：</span>
                钓鱼台馆藏封坛酒储存在特质的陶制酒坛中，有利于酒体的陈酿和老熟，随着储存
                年限的增长，酒味愈加醇和浓郁。每坛封坛酒均刻有唯一编号，并附有收藏证书，具有高
                档性、稀缺性、增值性等特征，凸现珍贵的收臧价值。
              </p>
              <button>立即购买</button>
            </div>
          </li>
          <li>
            <div class="c-l-left">
              <img src="../../assets/images/jianzhuang.jpg" alt="" />
            </div>
            <div class="c-l-right">
              <h3>53° &nbsp;&nbsp;&nbsp; 500斤 &nbsp;&nbsp;&nbsp; 洞藏酒</h3>
              <p>
                <span>封坛介绍：</span>
                钓鱼台馆藏封坛酒储存在特质的陶制酒坛中，有利于酒体的陈酿和老熟，随着储存
                年限的增长，酒味愈加醇和浓郁。每坛封坛酒均刻有唯一编号，并附有收藏证书，具有高
                档性、稀缺性、增值性等特征，凸现珍贵的收臧价值。
              </p>
              <button>立即购买</button>
            </div>
          </li>
          <li>
            <div class="c-l-left">
              <img src="../../assets/images/jianzhuang.jpg" alt="" />
            </div>
            <div class="c-l-right">
              <h3>53° &nbsp;&nbsp;&nbsp; 500斤 &nbsp;&nbsp;&nbsp; 洞藏酒</h3>

              <p>
                <span>封坛介绍：</span>
                钓鱼台馆藏封坛酒储存在特质的陶制酒坛中，有利于酒体的陈酿和老熟，随着储存
                年限的增长，酒味愈加醇和浓郁。每坛封坛酒均刻有唯一编号，并附有收藏证书，具有高
                档性、稀缺性、增值性等特征，凸现珍贵的收臧价值。
              </p>
              <button>立即购买</button>
            </div>
          </li>
        </ul>
      </div>
      <!-- 底部导航 -->
      <bottom-nav></bottom-nav>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import bottomNav from "../../components/bottomNav.vue";
//导入服务项目标题
import Xtltie from "../../components/Xtltie.vue";
export default {
  name: "SealtheAltar",
  //注册组件
  components: {
    Xtltie,
    bottomNav,
  },
  data() {
    return {
      checked: false,
      xtitle: {
        name: "封坛系列",
        nameEnglish: "Sealing series",
      },
    };
  },
};
</script>

<style lang="less" scoped>
@media screen and (min-width: 1029px) {
  .box-img {
    position: relative;
    margin-bottom: 80px;
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 6%;
    position: relative;
    background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .content-list {
      ul {
        width: 80%;
        margin: auto;
        padding-top: 40px;
        li {
          padding: 35px;
          margin-bottom: 25px;
          display: flex;
          border: 1px solid #f1f1f1;
          .c-l-left {
            width: 25%;
            img {
              width: 100%;
            }
          }
          .c-l-right {
            width: 64%;
            margin-left: 30px;
            text-align: left;
            line-height: 50px;
            h3 {
              font-size: 34px;
              font-weight: bold;
              color: #b50003;
            }
            div {
              font-size: 24px;
              span:nth-child(1) {
                font-weight: 600;
              }
            }
            p {
              /* 1.溢出隐藏 */
              overflow: hidden;
              /* 2.用省略号来代替超出文本 */
              text-overflow: ellipsis;
              /* 3.设置盒子属性为-webkit-box  必须的 */
              display: -webkit-box;
              /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
              -webkit-line-clamp: 3;
              /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
              word-break: break-all;
              /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
              -webkit-box-orient: vertical;
              font-size: 24px;
              color: #444444;
              span {
                font-weight: 600;
              }
            }
            button {
              margin-top: 60px;
              width: 120px;
              height: 40px;
              color: #ffffff;
              background-color: #ca0000;
            }
          }
        }
      }
    }
  }
}
@media only screen and (min-width: 750px) and (max-width: 1028px) {
  .box-img {
    position: relative;
    margin-bottom: 80px;
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 12%;
    position: relative;
    background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;

    .content-list {
      ul {
        width: 80%;
        margin: auto;
        padding-top: 40px;
        li {
          padding: 35px;
          margin-bottom: 25px;
          border: 1px solid #f1f1f1;
          .c-l-left {
            width: 28%;
            margin: auto;
            img {
              width: 100%;
            }
          }
          .c-l-right {
            width: 100%;
            text-align: center;
            h3 {
              font-size: 24px;
              font-weight: bold;
              color: #b50003;
            }
            div {
              font-size: 24px;
              span:nth-child(1) {
                font-weight: 600;
              }
            }
            p {
              display: -webkit-box; //对象作为弹性伸缩盒子模型显示
              overflow: hidden; //溢出隐藏
              -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
              -webkit-line-clamp: 3;
              font-size: 18px;
              color: #444444;
              span {
                font-weight: 600;
              }
            }
            button {
              margin-top: 10%;
              width: 20%;
              height: 40px;
              color: #ffffff;
              background-color: #ca0000;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 749px) {
  .box-img {
    position: relative;
    margin-bottom: 10px;
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 22%;
    position: relative;
    background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;

    .content-list {
      ul {
        width: 98%;
        margin: auto;
        padding-top: 20px;
        li {
          display: flex;
          // padding: 35px;
          margin-bottom: 25px;
          border: 1px solid #f1f1f1;
          .c-l-left {
            width: 40%;
            // margin: auto;
            overflow: hidden;
            img {
              width: 100%;
              transform: scale(1.5);
            }
          }
          .c-l-right {
            width: 100%;
            margin-left: 10px;
            text-align: left;
            // line-height: 40px;
            h3 {
              font-size: 14px;
              font-weight: bold;
              color: #b50003;
            }
            div {
              font-size: 14px;
              span:nth-child(1) {
                font-weight: 600;
              }
            }
            p {
              /* 1.溢出隐藏 */
              overflow: hidden;
              /* 2.用省略号来代替超出文本 */
              text-overflow: ellipsis;
              /* 3.设置盒子属性为-webkit-box  必须的 */
              display: -webkit-box;
              /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
              -webkit-line-clamp: 2;
              /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
              word-break: break-all;
              /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
              -webkit-box-orient: vertical;
              font-size: 14px;
              color: #444444;
              span {
                font-weight: 600;
              }
            }
            button {
              font-size: 12px;
              // margin-top: 10px;
              width: 25%;
              height: 20px;
              float: right;
              color: #ffffff;
              background-color: #ca0000;
            }
          }
        }
      }
    }
  }
}
</style>